<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>fileManager 文件管理组件 fileManager - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="文件管理组件，可配置上传及选择文件"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li> 
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a> 
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>fileManager 文件管理组件</a> <span class="layui-badge layui-bg-green layui-hide-xs">fileManager</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/550872/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">漫游**游</cite> <img src="/qqapp/101235792/D3474F26BF1DD8DA8A283B489BD890E2/100" alt="漫游**游"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>文件管理组件，可配置上传及选择文件</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">创建：2020-3-18 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
       <li lay-id=""> <a href="http://www.nbnat.com" rel="nofollow" target="_blank"> <i class="iconfont icon-kaifashili"></i> 来源 </a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text">
        图片文件管理插件 支持远程图片显示 可配置默认文件类型图标 配置操作与layui-table类似; 更多功能请下载试用
       <br>
       <img src="/uploads/images/2019/1226/212705_c5790b64_60481.png"> 
       <br>
       <hr>html示例
       <pre>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br><br>&lt;head&gt;<br>    &lt;meta charset="utf-8"&gt;<br>    &lt;title&gt;图库管理power by www.nbnat.com&lt;/title&gt;<br>    &lt;meta name="renderer" content="webkit"&gt;<br>    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;<br>    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;<br>    &lt;link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" /&gt;<br>    &lt;style&gt;.layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;}&lt;/style&gt;<br>&lt;/head&gt;<br><br>&lt;body style='padding:10px'&gt;<br>    &lt;button type="button" class="layui-hide" id="test1"&gt;&lt;/button&gt;<br>    &lt;fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"&gt;<br>        &lt;legend&gt;组件展示&lt;/legend&gt;<br>    &lt;/fieldset&gt;<br>    &lt;div class="layui-fluid"&gt;<br>        &lt;div id="fileManager" lay-filter="test"&gt;&lt;/div&gt;<br>    &lt;/div&gt;<br>    &lt;fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"&gt;<br>        &lt;legend&gt;弹层选图&lt;/legend&gt;<br>    &lt;/fieldset&gt;<br>    &lt;div class="layui-upload " &gt;<br>        &lt;div style="width:150px;display:inline-block;"&gt;<br>            &lt;div class="layui-upload-listv picview" data-name='pic1' &gt;<br>                &lt;img class="layui-upload-img"&gt;<br>                &lt;p&gt;&nbsp;&lt;/p&gt;<br>            &lt;/div&gt;<br>        &lt;/div&gt;<br>        &lt;div style="width:150px;display:inline-block;"&gt;<br>            &lt;div class="layui-upload-listv picview" data-name='pic2' &gt;<br>                &lt;img class="layui-upload-img"&gt;<br>                &lt;p&gt;&nbsp;&lt;/p&gt;<br>            &lt;/div&gt;<br>        &lt;/div&gt;<br>        &lt;div style="width:150px;display:inline-block;"&gt;<br>            &lt;div class="layui-upload-listv picview" data-name='pic3' &gt;<br>                &lt;img class="layui-upload-img"&gt;<br>                &lt;p&gt;&nbsp;&lt;/p&gt;<br>            &lt;/div&gt;<br>        &lt;/div&gt;<br>       <br>    &lt;/div&gt;<br>&lt;/body&gt;<br>&lt;script src="https://www.layuicdn.com/layui/layui.js"&gt;&lt;/script&gt;<br>&lt;script&gt;<br>    layui.extend({'fileManager': '../../../layui_exts/fileManager/fileManager'});<br>    layui.use(['fileManager', 'layer', 'upload'], function () {<br>        var fileManager = layui.fileManager<br>            , $ = layui.$<br>            , upload = layui.upload<br>            , layer = layui.layer;<br>        $('title').html($('title').html() + ' version:' + fileManager.v);<br>        var upIns = upload.render({<br>            elem: '#test1' //绑定元素<br>            , url: 'data.php?action=upload' //上传接口<br>            , field: 'file[]'<br>        })<br>        fileManager.render({<br>            elem: '#fileManager'<br>            , method: 'post'<br>            , id: 'fmTest'<br>            , btn_upload: true<br>            , btn_create: true<br>            , icon_url: 'ico/'<br>            , url: 'data.php?action=get_file_data_vm'<br>            , thumb: {'nopic': 'upload/null-100x100.jpg', 'width': 100, 'height': 100}<br>            , parseData: function (res) {<br>                /*<br>                data:[{<br>                    thumb:文件地址用于显示<br>                    ,type:文件类型  directory文件夹,png|gif|png|image图片,其它任意<br>                    ,path:文件夹路径用于打开本文件夹<br>                }]<br>                */<br>                let _res = [];<br>                _res.code = 0;<br>                _res.data = res.images;<br>                _res.count = res.count<br>                return _res;<br>            }<br>            , done: function (res, curr, count) {<br>                // console.log(res,curr,count)<br>            }<br>            , page: {limit: 12,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']}<br>            , where: {}<br>        });<br>        //监听图片选择事件<br>        fileManager.on('pic(test)', function (obj) {<br>            //obj.obj 当前对象<br>            //obj.data 当前图片数据<br>            var data = obj.data;<br>            layer.alert(JSON.stringify(data), {<br>                title: '当前数据：'<br>            });<br>        });<br>        //监听图片上传事件<br>        fileManager.on('uploadfile(test)', function (obj) {<br>            //obj.obj 当前对象<br>            //obj.path 路径<br>            //更改上传组件参数<br>            upIns.config.data = {'path': obj.path};<br>            upIns.config.done = function (res) {<br>                fileManager.reload('fmTest');<br>            }<br>            var e = document.createEvent("MouseEvents");<br>            e.initEvent("click", true, true);<br>            document.getElementById("test1").dispatchEvent(e)<br>        });<br>        //监听新建文件夹事件<br>        fileManager.on('new_dir(test)', function (obj) {<br>            //obj.obj 当前对象<br>            //obj.folder 文件夹名称<br>            //obj.path 路径<br>            e = JSON.parse(e);<br>            $.post('data.php?action=folder', {'folder': obj.folder, 'path': obj.path}, function (e) {<br>                layer.msg(e.msg);<br>                if (e.code == 1) {<br>                    fileManager.reload('fmTest');<br>                }<br>            })<br>        });<br>        //弹层选择<br>        $(document).on('click','.picview',function(res){<br>            let name = $(this).data('name');<br>            layui.data('_fm', {key: '_picview_name',value: name});<br>            layer.open({<br>                type:2<br>                , area: ['620px', '600px']<br>                ,content: ['pop.html', 'no']<br>            })<br>        });<br>        //弹层选择后的回调<br>        window.callback = function(res){<br>            let name = layui.data('_fm')._picview_name;<br>            console.log(name)<br>            $('.picview[data-name='+name+']').find('img').attr('src',res.thumb)<br>            $('.picview[data-name='+name+']').find('p').text(res.name);<br>            layui.data('_fm',null);<br>        }<br>    });<br>&lt;/script&gt;<br><br>&lt;/html&gt;</pre>
       <hr>PS:关注码云更新 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/550872_1583680081027_65914.zip" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a href="https://gitee.com/nbnat/layui-filemanage" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-red"> 去码云下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>